<template>
    <div>动态的类 与样式</div>
    <!--
    动态class样式： 作用 就是可以局部更改样式， 比如： 鼠标悬停时更改样式
    语法： :class="{类型1 : 条件}"
  
  -->
    <p class="pl">动态class样式</p>
    <p :class="{red_str : bool}">动态class样式</p>
    <p :class="{ red_str: bool, helloback:bool }">动态class样式</p>
    <p :class="classobj">动态class样式</p>

    <!--动态style样式-->
    <p :style="{fontSize:fontsize +'px',color:strcolor}">字体的颜色变化</p>
    <p :style="styleObj">字体的颜色变化2</p>
</template>


<script setup>
import { reactive, ref } from 'vue'
const bool = ref(true)
const classobj = ref({ red_str: true, helloback: false })
const styleObj = reactive({
    fontSize: "20px",
    color: 'red'
})
const fontsize = ref(20)
const strcolor =ref('red')
</script>

<style scoped>
.pl{
    font-size: 20px;
    color: red;
}
.red_str{
    font-size: 30px;
    font-weight: 900;
    color: blue;
}
.helloback{
    background-color: yellow;
}
</style>